<template>
  <div>
    <el-row type="flex" justify="center" class="search-area" :gutter="12">
      <el-col :span="12">
        <el-input v-model="keyword" placeholder="输入文档名称或关键词">
          <template slot="append">
            <el-button @click="searchDocument(keyword)" icon="el-icon-search"></el-button>
          </template>
        </el-input>
      </el-col>
    </el-row>
    <el-row
      v-if="searchResult.length > 0"
      type="flex"
      style="margin-top: 10px"
      justify="center">
      <el-col :span="12">
        <span style="font: 12px Extra Small; color: #99a9bf;">共{{ searchResult.length }}条搜索结果</span>
      </el-col>
    </el-row>
    <el-row
      type="flex"
      justify="center"
      v-for="item in searchResult"
      v-bind:key="item.id">
      <el-col :span="12">
        <el-divider></el-divider>
        <div class="doc-info">
          <el-tag type="primary" title="文档名称">{{ item.name }}</el-tag>
          <el-tag type="primary" title="文档ID">{{ item.id }}</el-tag>
          <el-tag type="primary" title="文档版本">version: {{ item.version }}</el-tag>
          <el-button
            @click="changeTagColl(item.id)"
            style="float: right"
            size="small"
            :icon="btnMap[item.id] ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            title="查看文档标签"></el-button>
        </div>
        <div class="doc-tags" v-if="btnMap[item.id] && tagMap[item.id]">
          <el-tag class="doc-tag" type="info" v-for="tag in tagMap[item.id]" v-bind:key="tag.tag">{{ tag.tag }}</el-tag>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from '@/utils/request'
import {getTagsByDocId} from '@/api/docTag'
export default {
  name: 'search',
  data () {
    return {
      keyword: undefined,
      searchResult: [],
      tagMap: {},
      btnMap: {}
    }
  },
  methods: {
    changeTagColl (docId) {
      let btnState = this.btnMap[docId]
      if (!btnState) {
        // 展开
        this.$set(this.btnMap, docId, true)
        let tags = this.tagMap[docId]
        if (!tags) {
          this.loadDocTags(docId)
        }
        return
      }
      // 关闭
      this.$set(this.btnMap, docId, false)
    },
    loadDocTags (docId) {
      if (!docId) return
      getTagsByDocId(docId).then(res => {
        if (res.data.length > 0) {
          this.$set(this.tagMap, docId, res.data)
        } else {
          this.$message.warning('该文档暂无标签')
        }
        // this.tagMap[docId] = res.data
      }).catch(error => {
        this.$notify.error(error)
      })
    },
    searchDocument (keyWord) {
      if (!keyWord) {
        this.$message.warning('请输入有效的关键词')
        return
      }
      this.doDocSearch(keyWord).then(res => {
        this.searchResult = res.data
        this.tagMap = {}
        this.btnMap = {}
        if (res.data.length < 1) {
          this.$message.warning('无结果，请尝试更换关键词')
        }
      }).catch(error => {
        this.$notify.error(error)
      })
    },
    doDocSearch (keyWord) {
      return request({
        url: '/doc/search',
        method: 'get',
        params: {
          keyword: keyWord
        }
      })
    }
  }
}
</script>

<style scoped>
.search-area {
  margin-top: 30px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.doc-tags {
  margin-top: 5px;
}
.doc-tag {
  margin: 5px 5px 5px 5px;
}
</style>
